[#-- freemarker page demo --]

[#-- 本页面为物理分页,有Action控制--]
[#if pageSupport ??]
  [#assign x=(pageSupport.getTotalPage())!1 /]
  [#assign y=pageSupport.getCurrentPage() /]
  [#assign z=(page.pageSupport.getPageSize())!1 /]
  [#assign renderTo=(table.renderTo)!'' /]
 	<script type="text/javascript">//<![CDATA[
		// ajax分页：
		[#if table.ajaxPage==true]
		var baseTable = (function(){
			function _addTableEventListeners() {
				$('a[page]').unbind('click').click(function() {
					var page = $(this).attr('page');
					var params = {'ajax':true, 'piece':true, 'currentPage':page};
					var sort = $('th[type]', '#${table.id}');
					if (sort != null) {
						params['sortList[0].name'] = sort.attr('sort');
						params['sortList[0].type'] = sort.attr('type');
					}
					
					$.get(baseTable.config.url, params, function(data){
						//
						$(baseTable.config.renderTo).html(data);
						_addTableEventListeners();
						//
					})
				})
				
				${table.onLoad}
			}
			function _addSortEventListeners() {
				// 单列排序
				$("th[sort]").unbind('click').click(function() {
				
					var page = 1;
					var sort = $(this).attr('sort');
					var type = $(this).attr('type');
					if (type == null || type == 1) {
						type = 2;
					} else {
						type = 1;
					}
					// 增加排序图标
					//$(this).removeClass('sorting').addClass('sorting_desc');
					$(this).attr('type', type);
					
					var params = {'ajax':true, 'piece':true, 'currentPage':page};
					params['sortList[0].name'] = sort;
					params['sortList[0].type'] = type;
					
					$.get(baseTable.config.url, params, function(data){
						//
						$(baseTable.config.renderTo).html(data);
						baseTable.init();
						//
					})
				})
			}
			return {
				 config: {
                	url : null,
                	renderTo: null,
                    theme: null
                },
                init: function () {
                    _addTableEventListeners();
                    _addSortEventListeners();
                }
			}
		}());
		$(function() {
			//var parent = $('#${table.id}').parent().html();
			baseTable.config.url = "${page.url}" ;
			baseTable.config.theme = '';
			baseTable.config.renderTo= "${renderTo!'#articleList'}";
			baseTable.init();
		})
		[/#if]
		//]]>
	</script>
	
[/#if]
	<table cellspacing="0" cellpadding="0" border="0" id="${(table.id)!'sortTable'}" class="stdtable stdtablecb">
		[#if x lte 0]
			[#assign x=1]
		[/#if]
		[#if (table.columnList) ?? ]
        	<colgroup>
				[#list table.columnList as head]
					<col class="[#if head_index%2==0]con0[#else]con1[/#if]" />
					[#--<th class="${head.headerClass!''}">${head.title}</th>--]
				[/#list]
			</colgroup>
			<thead>
                <tr>
                [#list table.columnList as head]
					[#if head.headHtml??]
                		<th class="[#if head_index%2==0]head0[#else]head1[/#if] [#if head.sortable==true]sorting [#if sortList??][#list sortList as sort][#if sort.name==head.sort][#if sort.type == 2]sorting_desc[#else]sorting_asc[/#if][/#if][/#list][/#if][/#if] ${head.headerClass!''}" [#if head.sortable==true]sort="${head.sort}" [#if sortList??][#list sortList as sort][#if sort.name==head.sort]type=${sort.type}[/#if][/#list][/#if][/#if]>${head.headHtml}</th>
                	[#else]
                		<th class="[#if head_index%2==0]head0[#else]head1[/#if] [#if head.sortable==true]sorting [#if sortList??][#list sortList as sort][#if sort.name==head.sort][#if sort.type == 2]sorting_desc[#else]sorting_asc[/#if][/#if][/#list][/#if][/#if] ${head.headerClass!''}" [#if head.sortable==true]sort="${head.sort}" [#if sortList??][#list sortList as sort][#if sort.name==head.sort]type=${sort.type}[/#if][/#list][/#if][/#if]>${head.title}</th>
                	[/#if]
				[/#list]
                </tr>
			</thead>
			<tfoot>
                <tr>
                [#list table.columnList as foot]
                	[#if foot.footHtml??]
                		<th class="[#if foot_index%2==0]head0[#else]head1[/#if] ${foot.headerClass!''}">${foot.footHtml}</th>
                	[#else]
                		<th class="[#if foot_index%2==0]head0[#else]head1[/#if] ${foot.headerClass!''}">${foot.title}</th>
                	[/#if]
				[/#list]
                </tr>
			</tfoot>
			<tbody>
				[#--[#assign blank=z/]--]
				[#list table.source as target]
					<tr>
						[#list table.columnList as column]
							[#if column.innerHtml?? ]
								<td class="${column.columnClass}" [#if column.property ??]tval="${displayer.property("[${target_index}].${column.property}", "")}"[/#if] >
									${displayer.property("${column.innerHtml}", target_index)}
								</td>
							[#else]
								<td class="${column.columnClass}">
									${displayer.property("[${target_index}].${column.property}", "${column.format}")}
								</td>
							[/#if]
						[/#list]
					</tr>
					[#--[#assign blank=z-target_index> --]
				[/#list]
				[#-- 不足分页内容,补齐空白行
				[#list 1..blank as t]
					<tr>
						[#list table.columnList as column]
							<td class="${column.columnClass}">
								&nbsp;
							</td>
						[/#list]
					</tr>
				[/#list] --]
			</tbody>
		[/#if]
	</table>
	[#--<div class="dataTables_info" id="dyntable_info">Showing 1 to 10 of 51 entries</div>--]
	<div class="dataTables_paginate paging_full_numbers" id="dyntable_paginate">
		<span style="position: ;float:left;margin:4px 1px 0 4px;">当前第<strong> ${y} </strong>页 &nbsp;&nbsp;共<strong> ${x} </strong>页 (每页<strong> ${z} </strong>条记录)</span>
		[#--<span class="first paginate_button paginate_button_disabled" id="dyntable_first">First</span>
		<span class="previous paginate_button paginate_button_disabled" id="dyntable_previous">Previous</span>--]
		<a class="previous paginate_button paginate_button_disabled" target="${page.target}" page="1" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(1)}"[/#if]>${displayer.getMessage("page.first")}</a>
		[#if pageSupport.isFirst() ]
			<span class="previous paginate_button paginate_button_disabled" id="dyntable_previous">${displayer.getMessage("page.previous")}</span>
		[#else]
			<a class="previous paginate_button paginate_button_disabled" target="${page.target}" page="${y-1}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(y-1)}"[/#if]>${displayer.getMessage("page.previous")}</a>
		[/#if]
		<span>
			[#list 1..x as i]
				[#-- 处理 分页数过多的情况,忽略一部分分页按钮--]
				[#-- 分页数大于6页时,使用两端显示分页按钮--]
				[#if i == y]
					<span class="paginate_active">${i}</span>
				[#else]
					[#if x > 6 ]
						[#-- 除前三页和后三页外,其他分页需要判断是否显示 --]
		 				[#if i > 3 &&  (x - i) > 2 ]
		 					[#-- 从循环的第四页开始,如果当前分页在前三页或后三页内,显示省略号 --]
		 					[#if  (y < 3 || y > x - 2) && i == 4]
		 						<span class=""><strong>&nbsp;...&nbsp;</strong></span>
		 					[/#if]
	 						[#if i == y + 1]
	 							[#-- 显示选中页的后一页 --]
	 							<a class="paginate_button" target="${page.target}" page="${i}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(i)}"[/#if]>${i}</a>
	 							[#if y < x - 4]
	 								[#-- 如果超过后5页,开始出现... --]
	 								<span class=""><strong>&nbsp;...&nbsp;</strong></span>
	 							[/#if]
	 						[#elseif i == y - 1]
	 							[#-- 显示选中页的前一页 --]
	 							[#if y > 5]
	 								[#-- 如果超过前5页,开始出现... --]
	 								<span class=""><strong>&nbsp;...&nbsp;</strong></span>
	 							[/#if]
	 							<a class="paginate_button" target="${page.target}" page="${i}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(i)}"[/#if]>${i}</a>
	 						[/#if]
		 				[#else]
		 					[#-- 显示1,2,3 max-2, max-1, max 页--]
				 			<a class="paginate_button" target="${page.target}" page="${i}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(i)}"[/#if]>${i}</a>
		 				[/#if]
		 			[#else]
		 				[#-- 总页数x不超过6页时,全部显示分页 --]
		 				<a class="paginate_button" target="${page.target}" page="${i}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(i)}"[/#if]>${i}</a>
		 			[/#if]
				[/#if]

	 			[#-- 全显示分页
		 		[#if i == y]
		 			<span class="paginate_active">${i}</span>
		 		[#else]
		 			<a class="paginate_button" target="${page.target}" page="${i}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(i)}"[/#if]>${i}</a>
		 		[/#if]--]
		 	[/#list]
			[#--<span class="paginate_active">1</span>
			<span class="paginate_button">2</span>
			<span class="paginate_button">3</span>
			<span class="paginate_button">4</span>
			<span class="paginate_button">5</span>
			<span class="next paginate_button" id="dyntable_next">Next</span>
			<span class="last paginate_button" id="dyntable_last">Last</span>
			--]
		</span>
		
		[#if pageSupport.isLast()]
		 	<span class="next paginate_button">${displayer.getMessage("page.next")}</span>
		[#else]
		 	<a class="next paginate_button" target="${page.target}" class="s1" page="${y+1}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(y+1)}"[/#if]>${displayer.getMessage("page.next")}</a>
		[/#if]
		<a class="previous paginate_button paginate_button_disabled" target="${page.target}" page="${x}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(x)}"[/#if]>${displayer.getMessage("page.last")}</a>
	</div>
	[#--
	[#if pageSupport ??]
		<table class="page-table" align="center" id='${pageId}'>
			<tr>
				<td class="page-td">
					[#if pageSupport.isFirst() ]
						<span class="page-td-p page-disable">${displayer.getMessage("page.previous")}</span>
					[#else]
						<a class="page-td-p" target="${page.target}" page="${y-1}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(y-1)}"[/#if]>${displayer.getMessage("page.previous")}</a>
					[/#if]
					[#list 1..x as i]
				 		[#if i == y]
				 			<span class="page-td-p page-selected">${i}</span>
				 		[#else]
				 			<a class="page-td-p" target="${page.target}" page="${i}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(i)}"[/#if]>${i}</a>
				 		[/#if]
				 	[/#list]
					[#if pageSupport.isLast()]
					 	<span class="page-td-p page-disable">${displayer.getMessage("page.next")}</span>
					[#else]
					 	<a class="page-td-p" target="${page.target}" class="s1" page="${y+1}" [#if table.ajaxPage==true]href="javascript:void(0);"[#else]href="${page.getPageUrl(y+1)}"[/#if]>${displayer.getMessage("page.next")}</a>
					[/#if]
					<span class="page-td-p page-disable">共${x}页</span>
					<div class="clear"></div>
				</td>
			</tr>
		</table>
	[/#if]--]